<template>
    <div>
        <h3>我是首页...</h3> 
        <!-- 注意这里要写全路径,不能直接写news,否则点击直接跳转到 news 了 -->
        <router-link to="/home/news">新闻</router-link>   
        <router-link to="/home/messages">消息</router-link>
        <router-view></router-view>
    </div>    
</template>

<script>
export default {
    name:'Home',
    data(){
        return {
            newsPath:'/home/news' 
        }
    },
    created(){  //组件被创造完后执行的回调函数(进入到这个组件时)
        console.log("home-created");
        document.title = "首页"

    },
    destroyed(){ //组件被销毁后执行的回调函数(离开这个组件时)
        console.log("home-destroyed");
    },
    /** activated和deactivated 只有在该组件使用了 keep-alive 时才生效*/ 
    activated(){ //组件处于活跃状态时执行的回调函数
        console.log("home-activated");
        this.$router.push(this.newsPath) //当组件处于活跃状态时跳转到 home/news 路由
    },
    beforeRouteLeave(to,from,next){
        this.newsPath = this.$route.path
        next()
    }
    // deactivated(){
    //     console.log("home-deactivated");
    // }
}
</script>

<style>

</style>